<template>
    <!-- table的组件封装 -->
    <div style="position: relative;" ref="filterBox" :class="[isMore?'':'is-more','filterBox']">
        <!-- height: 100%; -->
        <el-form style="overflow: hidden;display: flex;flex-wrap: wrap;" ref="form" :model="filterData" size="mini" :inline="true">
            <el-form-item v-for="(item,index) in filterItemList" :key="index" :label="item.label+'：'">
                <div>
                    <el-input v-if="item.filterType=='SearchInput'" v-model="filterData[item.filterKey]" :placeholder="!!item.placeholderStr?item.placeholderStr:$t('common.input_plactholder')"></el-input>
                    <el-select v-else-if="item.filterType=='SearchSelect'" v-model="filterData[item.filterKey]" :placeholder="!!item.placeholderStr?item.placeholderStr:$t('common.select_plactholder')">
                        <el-option
                        v-for="(el,key) in item.filterOptions.options"
                        :key="key"
                        :label="!item.filterOptions.label1?el[item.filterOptions.label]:el[item.filterOptions.label]+el[item.filterOptions.label1]"
                        :value="el[item.filterOptions.value]">
                        </el-option>
                    </el-select>
                    <el-select v-else-if="item.filterType=='SearchFilterSelect'" v-model="filterData[item.filterKey]" filterable :placeholder="!!item.placeholderStr?item.placeholderStr:$t('common.select_plactholder')">
                        <el-option
                        v-for="(el,key) in item.filterOptions.options"
                        :key="key"
                        :label="el[item.filterOptions.label]"
                        :value="el[item.filterOptions.value]">
                        </el-option>
                    </el-select>
                    <el-date-picker
                        v-else-if="item.filterType=='SearchDate'" 
                        v-model="filterData[item.filterKey]"
                        @change="timeChange(item.filterKey)"
                        type="daterange"
                        value-format="timestamp"
                        :range-separator="$t('common.range_separator')"
                        :start-placeholder="$t('common.start_placeholder')"
                        :end-placeholder="$t('common.end_placeholder')">
                    </el-date-picker>
                    <slot v-else-if="item.filterType=='filter_slot'" :name="item.filterKey"></slot>
                </div>
            </el-form-item>
        </el-form>
        <div ref="buttonGroupCon" class="buttonGroup">
            <span
                class="buttonGroupItem"
                v-for="(el,key) in buttonGroupArr"
                :key="key">
                <i v-if="key!=0" style="marginRight:10px;" class="shu"></i>
                <span v-if="el=='search'" @click="search"><i class="icon_style el-icon-search"></i>{{$t('FilterBoxLang.search')}}</span>
                <span v-if="el=='clear'" @click="clear"><i class="icon_style el-icon-refresh"></i>{{$t('FilterBoxLang.clear')}}</span>
                <span v-if="el=='refresh'" @click="refresh"><i class="icon_style el-icon-refresh"></i>{{$t('FilterBoxLang.refresh')}}</span>
                <span v-if="el=='keep'" @click="keep"><i class="icon_style el-icon-tickets"></i>{{$t('FilterBoxLang.keep')}}</span>
            </span>
            <i v-if="isHoverMore" class="shu"></i>
            <span ref="featureRef" v-if="isHoverMore">
                <span v-if="isMore" @click="more">{{$t('FilterBoxLang.unfold')}}<i class="el-icon-arrow-down"></i></span>
                <span v-else @click="more">{{$t('FilterBoxLang.put_away')}}<i class="el-icon-arrow-up"></i></span>
            </span>
            
        </div>
    </div>
</template>

<script>
export default {
    name: "FilterBox",
    props:{
        labelWidth: {
            type: Number,
            default:80
        },
        filterItemList: {
            type: Array
        },
        filterData:{
            type: Object
        },
        buttonGroupArr: {
            type: Array,
            default:function(){
                return ['search','clear','keep']
            }
        },
    },
    data() {
        return {
            isHoverMore:false,//是否有"展开/收起"按钮
            isMore:true,//"展开/收起"按钮切换
        };
    },
    computed:{
    },
    mounted(){
        console.log(this.$refs.buttonGroupCon.offsetWidth)
        window.addEventListener("resize", this.setButton);
        let doms=this.$refs.filterBox.getElementsByClassName('el-form-item__content')
        for (let i = 0; i < doms.length; i++) {
            if(!!this.filterItemList[i]&&this.filterItemList[i].filterType!='SearchDate'){
                doms[i].style.width=this.filterItemList[i].width+'px'
            }
        }
        this.setButton()
    },
    methods: {
        setButton(){
            if(!this.$refs.buttonGroupCon) return
            let widthNum=this.$refs.buttonGroupCon.offsetWidth+70
            // if(JSON.parse(localStorage.getItem('language')).lang=='ru'){
            //     widthNum=500
            // }
            this.$nextTick(()=>{
                let isHaveFeature=!!this.$refs.featureRef//是否有收起按钮
                let formitemArr=this.$refs.filterBox.getElementsByClassName('el-form-item')
                if(!this.$refs.filterBox||formitemArr.length==0){
                    return
                }
                let boxWidth=this.$refs.filterBox.clientWidth-widthNum
                let index=0
                for (let i = 0; i < formitemArr.length; i++) {
                    let el=formitemArr[i]
                    boxWidth-=el.clientWidth
                    if(boxWidth<el.clientWidth&&i!==formitemArr.length-1){
                        console.log(boxWidth,'<<<',el.clientWidth,formitemArr.length,i)
                        this.isHoverMore=true 
                        index=i
                        break
                    }else{
                    this.isHoverMore=false 
                    }
                }
                this.$nextTick(()=>{ 
                    console.log(index,this.isHoverMore)
                    let domArr=this.$refs.filterBox.getElementsByClassName('el-form-item')
                    if(!!domArr){
                        widthNum=this.$refs.buttonGroupCon.offsetWidth+70
                        for (let i = 0; i < domArr.length; i++) {
                            if(i==index&&this.isHoverMore){
                                domArr[i].style.marginRight=widthNum+"px"
                            }else{
                                domArr[i].style.marginRight="0"
                            }
                        }
                    }
                })
            })
        },
        timeChange(name) {
            if (!!this.filterData[name]&&this.filterData[name].length > 0) {
                this.filterData[name+'1'] = this.filterData[name][0] / 1000;
                this.filterData[name+'2'] = this.filterData[name][1] / 1000;
            }else{
                this.filterData[name+'1'] = '';
                this.filterData[name+'2'] = '';
            }
        },
        search(){
            this.filterData.page=''
            this.$emit('search')
        },
        clear(){
            this.filterData.page=''
            this.$emit('clear')
        },
        refresh(){
            this.$emit('refresh')
        },
        keep(){
            this.$emit('keep')
        },
        more(){
           this.isMore= !this.isMore
        },
    }
};
</script>

<style scoped lang="less">

.filterBox.is-more {
    max-height: 200px;
    transition: max-height 0.5s ease-in;
}



/deep/ .el-form-item__label {
    line-height: 32px;
    padding: 0 0 0 15px;
}
.filterBox {
    max-height: 38px;
    transition: max-height 0.5s ease-out;
    margin-bottom: 15px;
    background-color: #EBEEF3;
    padding: 3px 0;
    display: flex;
    justify-content: space-between;
    /deep/ .el-form--inline .el-form-item{
        margin: 3px 0;
        .el-form-item__content{
            line-height: 1;
        }
        .el-select,.el-input--mini {
            width: 100%;
            .el-input__inner{
                height: 32px !important;
                line-height: 32px !important;
                border-color: #EBEEF3 !important;
                border-radius:6px !important;
            }
            .el-input__suffix{
                top:2px;
            }
        }
    }
    /deep/ .el-date-editor--daterange{
        width: auto;
        height: 32px !important;
        line-height: 32px !important;
        border-color: #EBEEF3 !important;
        border-radius:6px !important;
        padding: 0px 5px;
        .el-range-input{
            width: 65px
        }
        .el-range-separator{
            width: auto;
            line-height: 30px;
        }
        .el-range__icon{
            line-height: 22px;
        }
    }
    .buttonGroup{
        position: absolute;
        top: 13px;
        right: 0px;
        // min-width: 240px;
        display: flex;
        justify-content: flex-end;
        color: #474849;
        font-size: 14px;
        margin-right: 30px;
        cursor: pointer;
        gap: 10px;
        .shu{
            border-left: 1px solid #7D8592;
        }
        .buttonGroupItem{
            display: flex;
            align-items: center;
            .icon_style{
                margin-right: 5px;
            }
        }
    }
}
</style>